<template>
	<view class="page">
		<view class="pageBg">
			<image src="https://bjsx.gzwhir.com/admin-api/infra/file/18/get/memberbg2.jpg" mode="aspectFill"></image>
		</view>
		<view class="flex0">
			<u-navbar :fixed='false' bgColor="transparent" @leftClick="navBack"  title="基本信息">
				<view slot="center" class="navTitle">
					基本信息 
				</view>
			</u-navbar>
		</view>
		<view class="flex1">
			<scroll-view scroll-y="true" class="scrollView pt30">
				<view class="pd30">
					<view class="whiteForm">
						<view class="line s2" style="position: relative;">
							<view class="ll">
								<view class="avan">
									
									
									<image :src="personInfo.avatar" mode="aspectFill"></image>
								</view>
							</view>
							<view class="lr">
								<view class="fs">
									<text>修改头像</text>
									<view class="ico">
										<image src="@/static/images/icon-more.svg" mode="aspectFit"></image>
									</view>
								</view>
							</view>
							
							<button type="default" open-type="chooseAvatar" @chooseavatar="chooseavatar"
								style="font-size: 30rpx;position: absolute;top:0;bottom: 0;left: 0;right: 0;opacity: 0;z-index: 1;">上传微信头像</button>
						</view>
					</view>
					<view class="whiteForm">
						<view class="line">
							<view class="ll">
								姓名
							</view>
							<view class="lr">
								<input class="cell-bd-input" type="nickname" @change="nicknameChange" v-model="personInfo.name" />
							</view>
						</view>
						<view class="line">
							<view class="ll">
								性别
							</view>
							<view class="lr">
								{{personInfo.sex}}
							</view>
						</view>
						<view class="line">
							<view class="ll">
								年龄
							</view>
							<view class="lr">
								{{personInfo.age || ''}}岁
							</view>
						</view>
						<view class="line">
							<view class="ll">
								手机号
							</view>
							<view class="lr" style="position: relative;">
								<button class="btn-phone" hover-class="none" size="default" open-type="getPhoneNumber"
									@getphonenumber="loginPhone"></button>
								{{personInfo.mobile || '请选择'}}
							</view>
						</view>
						<view class="line">
							<view class="ll">
								邮箱
							</view>
							<view class="lr">
								<input type="text" placeholder="请输入" v-model="form.email" />
							</view>
						</view>
						<view class="line">
							<view class="ll">
								工作单位
							</view>
							<view class="lr">
								<input type="text" placeholder="请输入" v-model="form.workUnit" />
							</view>
						</view>
						<view class="line">
							<view class="ll">
								工作地址
							</view>
							<view class="lr">
								<input type="text" placeholder="请输入" v-model="form.workAddress" />
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<view class="flex0 fbtns">
			<view class="pd30">
				<view class="btn" @tap="submit">
					确认修改
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				personInfo:{}
			}
		},
		methods: {
			chooseavatar(e) {
				console.log(e);

				uni.uploadFile({
					url: this.$config.apiBaseUrl + "api/file/upload", //仅为示例，非真实的接口地址
					filePath: e.detail.avatarUrl,
					fileType: 'image',
					name: 'file',
					header: {

						'Accept': 'application/json',
						'Content-Type': 'application/x-www-form-urlencoded',
						'Authorization': this.$db.get("userToken"),
						'deptId': this.$db.get("deptId")
					},
					formData: {
						'file': e.detail.avatarUrl

					},
					success: (uploadFileRes) => {
						this.personInfo.avatar= JSON.parse(uploadFileRes.data).data
						console.log(uploadFileRes,2122121)
						
					},
				});
			},
			nicknameChange(e) {
				this.personInfo.name= e.detail.value
				this.toEdit()
				
			},
			async loginPhone(e) {
				uni.login({
				success: res1=> {
						console.log(res1,1211)
						let phoneInfo = e.detail
						let postData = {
							encryptedData: phoneInfo.encryptedData,
							iv: phoneInfo.iv,
							code: res1.code
						}
						this.$api.wxPhone(postData, res => {
							if (res.code == 200) {
								let phone=res.data
								this.$api.memberUpdate_mobile({
									type:1,
									phone: res.data
								}, res => {
									if (res.code == 200) {
										this.userInfo.mobile=phone
									} else {
										uni.showToast({
											title: res.message,
											icon: 'none'
										});
									}
								})
					
							} else {
								uni.showToast({
									title: res.message,
									icon: 'none'
								});
							}
						})
					}
				});
				
			},
			submit(){
				
					let post=JSON.parse(JSON.stringify(this.personInfo))
					post.logo=this.personInfo.avatar
					this.$api.userUpdate(post, res => {
						if (res.code == 200) {
							uni.showToast({
								title: '修改成功！',
								icon: 'none'
							});
							this.getInfo()
						}else{
							uni.showToast({
								title: res.message,
								icon: 'none'
							});
						}
					})
			},
			getInfo(){
				if (this.$db.get("userToken")) {
					this.$api.memberInfo({}, res => {
						if (res.code == 200) {
							this.personInfo = res.data;
						}
					})
				
				}
			}
		},
		computed:{
			
		},
		mounted(){
			this.getInfo();
		}
	}
</script>

<style lang="scss" scoped>
	.whiteForm{
		padding: 0 40rpx;
		background: #fff;
		border-radius: 30rpx;
		margin-bottom: 20rpx;
		&:last-child{
			margin-bottom: 0;
		}
		.textarea{
			border: none;
			background: #fff;
			font-size: 28rpx;
			color: #65554d;
			outline: none;
			line-height: 1.5;
			padding: 40rpx 0;
		}
		.line{
			flex: 0 0 auto;
			display: flex;
			align-items: center;
			height: 100rpx;
			justify-content: space-between;
			border-bottom: 1rpx solid #f7f5f2;
			font-size: 28rpx;
			&.s2{
				height: 140rpx;
			}
			&:last-child{
				border: none;
			}
			.ll{
				flex: 1 1 auto;
				overflow: hidden;
				padding-right: 30rpx;
				color: #897f7a;
				.avan{
					width: 90rpx;
					height: 90rpx;
					border: 5rpx solid #ffe3c2;
					box-sizing: border-box;
					background: #fff;
					overflow: hidden;
					border-radius: 50%;
					image{
						display: block;
						width: 100%;
						height: 100%;
					}
				}
			}
			.lr{
				flex: 0 0 auto;
				display: flex;
				align-items: center;
				color: #af9c91;
				.fs{
					display: flex;
					align-items: center;
				}
				input{
					display: block;
					outline: none;
					border: none;
					background: transparent;
					width: 100%;
					text-align: right;
					font-size: 28rpx;
					color: #65554d;
				}
				.ico{
					flex: 0 0 auto;
					margin-left: 10rpx;
					image{
						display: block;
						width: 12rpx;
						height: 24rpx;
					}
				}
				.cur{
					flex: 0 0 auto;
				}
			}
		}
	}
</style>
